<template>
  <v-container fluid class="record-wrapper">
    <v-layout row nowrap justify-center>

      <v-flex md8 sm10 xs12>
        <v-layout row wrap justify-center>
          <v-flex xs12>
            <v-layout row align-center>
              <v-flex md2>
                <v-btn icon @click="$router.push('/demand')">
                  <v-icon>
                    arrow_back
                  </v-icon>
                </v-btn>
              </v-flex>
              <v-spacer></v-spacer>
              <v-flex md2 d-flex justify-end align-center>
                <span class="title">{{date}} {{week}}</span>
                <v-btn dark color="blue" @click="$router.push(`/demanddetails?type=add&dp=${$route.query.type}`)">
                  <v-icon>add</v-icon>
                  <span class="subheading">新增记录</span>
                </v-btn>
              </v-flex>
            </v-layout>
            <v-divider></v-divider>
          </v-flex>

          <v-flex xs12 d-flex justify-center>
            <div class="tab-wrapper">
              <div v-for="item of tabItems" :key="item.name" :class="{'tab-item': true, 'tab-selected': item.value === selected}" @click="selected = item.value">
                  <span class="tab-title">{{item.name}}</span>
                <div class="tab-content">
                </div>
              </div>
            </div>
          </v-flex>



          <v-flex xs12 class="mt-2" v-show="selected == 1">
            <v-flex xs12 d-flex justify-center>
              <v-layout row justify-start>
                <v-flex md2 sm3 xs4 class="mx-2">
                  <v-text-field name="projectName" label="项目名称" v-model="queryForm.projectName"></v-text-field>
                </v-flex>
                <v-flex md2 sm3 xs4 class="mx-2">
                  <v-text-field name="versionNumber" label="版本号" v-model="queryForm.versionNumber"></v-text-field>
                </v-flex>
                <v-flex md2 sm3 xs4 class="mx-2">
                  <v-btn @click="search" dark color="blue" class="mt-2">
                    <v-icon>search</v-icon>
                    <span class="pl-2 subheading">搜索</span>
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-data-table :loading="showProgress" :headers="headers" :items="tableData" hide-actions class="elevation-1">
              <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
              <template slot="items" slot-scope="props">
                <td class="text-xs-center subheading" width="20%">{{ props.item.demandRecord.demandName }}</td>
                <td class="text-xs-center subheading" width="20%">{{ props.item.demandRecord.projectName | ProjName }}</td>
                <td class="text-xs-center subheading" width="16%">{{ getTime(props.item.demandRecord.createTime, 'date') }}</td>
                <td class="text-xs-center subheading" width="16%">{{ getTime(props.item.ddRecord.deadTime, 'date') }}</td>
                <td class="text-xs-center subheading" width="20%">
                  <v-avatar size="16" :color="statusColor[props.item.ddRecord.status]"></v-avatar>
                  <span class="status-td">{{ props.item.ddRecord.status | Status }}</span>
                </td>
                <td class="text-xs-center">
                  <v-btn flat round dark color="green" class="mx-1" @click="edit(props.item)">
                    <span class="mx-1">编辑</span>
                    <v-icon color="green">edit</v-icon>
                  </v-btn>
                  <v-btn flat round dark color="red" class="mx-1" @click="del(props.item)">
                    <span class="mx-1">删除</span>
                    <v-icon color="red">delete_forever</v-icon>
                  </v-btn>
                </td>
              </template>
              <!-- 没有数据时显示的提示 -->
              <template slot="no-data">
                <div class="text-xs-center">
                  <v-icon color="yellow darken-3">warning</v-icon>
                  <span class="subheading">暂无数据</span>
                </div>
              </template>
            </v-data-table>
            <div class="text-xs-center my-2">
              <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
            </div>
          </v-flex>

          <v-flex xs12 class="mt-2" v-show="selected == 2">
            <v-data-table :loading="showProgress" :headers="headers" :items="tableData" hide-actions class="elevation-1">
              <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
              <template slot="items" slot-scope="props">
                <td class="text-xs-center subheading" width="20%">{{ props.item.demandRecord.demandName }}</td>
                <td class="text-xs-center subheading" width="20%">{{ props.item.demandRecord.projectName | ProjName }}</td>
                <td class="text-xs-center subheading" width="16%">{{ getTime(props.item.demandRecord.createTime, 'date') }}</td>
                <td class="text-xs-center subheading" width="16%">{{ getTime(props.item.ddRecord.deadTime, 'date') }}</td>
                <td class="text-xs-center subheading" width="20%">
                  <v-avatar size="16" :color="statusColor[props.item.ddRecord.status]"></v-avatar>
                  <span class="status-td">{{ props.item.ddRecord.status | Status }}</span>
                </td>
                <td class="text-xs-center">
                  <v-btn flat round dark color="green" class="mx-1" @click="edit(props.item)">
                    <span class="mx-1">编辑</span>
                    <v-icon color="green">edit</v-icon>
                  </v-btn>
                  <v-btn flat round dark color="red" class="mx-1" @click="del(props.item)">
                    <span class="mx-1">删除</span>
                    <v-icon color="red">delete_forever</v-icon>
                  </v-btn>
                </td>
              </template>
              <!-- 没有数据时显示的提示 -->
              <template slot="no-data">
                <div class="text-xs-center">
                  <v-icon color="yellow darken-3">warning</v-icon>
                  <span class="subheading">暂无数据</span>
                </div>
              </template>
            </v-data-table>
            <div class="text-xs-center my-2">
              <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
            </div>
          </v-flex>

        </v-layout>
      </v-flex>
    </v-layout>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as demand from "../../api/demand";
import { getTime } from "../../util";
// import PROJECT from '../../util/projects'
let PROJECT = {};
export default {
  data: () => ({
    tabs: null,
    showProgress: false,
    dialog: false,
    modal: false,
    date: "",
    modalText: "确认删除该条需求吗？",
    projectName: 1,
    departmentName: 1,
    limit: 10,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    selected: 1,
    tabItems: [
      {
        name: "未完成",
        value: 1
      },
      {
        name: "已完成",
        value: 2
      }
    ],
    queryForm: {},
    tableData: [],
    showProgress: false,
    statusColor: {
      "0": "amber",
      "1": "green",
      "2": "indigo",
      "3": "red"
    },
    projTypesItems: {
      "0": "无",
      "1": "客户端",
      "2": "服务端"
    },
    headers: [
      {
        text: "需求名称",
        value: "projName",
        align: "center",
        sortable: false
      },
      {
        text: "项目名称",
        value: "releaseTime",
        align: "center",
        sortable: false
      },
      {
        text: "提交日期",
        value: "version",
        align: "center",
        sortable: false
      },
      {
        text: "完成日期",
        value: "vleader",
        align: "center",
        sortable: false
      },
      {
        text: "需求状态",
        value: "status",
        align: "center",
        sortable: false
      },
      {
        text: "操作",
        value: "actions",
        align: "center",
        sortable: false
      }
    ],
    dayData: {},
    weekdays: [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六"
    ],
    week: "",
    type: 1,
    projectList: {},
    tabItems: [
      {
        name: "未完成",
        value: 1
      },
      {
        name: "已完成",
        value: 2
      }
    ]
  }),
  mounted() {
    this.type = this.$route.query.type;
    // this.initialize();
    this.getProjectList();
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  filters: {
    ProjName: function(val) {
      return PROJECT[val];
    }
  },
  methods: {
    getTime,
    initialize() {
      this.tableData = [
        {
          demandName: "声音",
          createTime: "2018/6/19 10:32:26",
          deadTime: "2018/6/19 16:32:26",
          projectName: 1,
          status: 1
        },
        {
          demandName: "实时在线人数",
          createTime: "2018/6/19 12:42:06",
          deadTime: "2018/6/19 12:42:06",
          projectName: 6,
          status: 2
        }
      ];
    },
    getProjectList() {
      demand.getProjectList.r().then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          let projects = {};
          _.forEach(d.dataList, (item, i) => {
            projects[item.id] =
              item.projectName + "-" + this.projTypesItems[item.type];
          });
          PROJECT = projects;
          this.getDemandList();
        }
      });
    },
    getDemandList() {
      let opt = {
        offset: this.offset,
        limit: this.limit,
      };
      demand.getDemandList.r(opt).then(({ data }) => {
        console.log(data);
        if (data.result == 0) {
          this.tableData = data.data.dataList;
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
        }
      });
    },
    edit(item) {
      this.$router.push(
        `/demanddetails?type=edit&demandid=${item.demandRecord.id}&dp=${
          this.$route.query.type
        }&handover=${this.$route.query.handover}`
      );
    },
    del(item) {},
    confirmModal() {},
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      this.getDemandList();
    },
    tabChange() {},
    search() {}
  }
};
</script>

<style lang="less" scoped>
</style>


